<template>
  <div class="wrapper">
    <parallax class="section page-header header-filter" :style="headerStyle">
      <HeadLine style="z-index: 1;position: relative;">
        <template slot="centre">
          关于我们
        </template>
      </HeadLine>
    </parallax>
    <div class="main main-raised">
      <div class="section profile-content">
        <div class="container">
          <!-- <div class="md-layout">
						<div class="md-layout-item md-size-50 mx-auto">
							<div class="profile">
	
							</div>
						</div>
					</div> -->
          <div class="description text-center">
            <p>
              石家庄鑫灵信息技术有限责任公司成立于2017年04月06日，注册地位于河北省石家庄市裕华区仓兴街10号盛邦花园六区9-2601，法定代表人为赵华杰。经营范围包括计算机软硬件技术开发、咨询及服务，计算机及软件、电子产品及辅助设备的销售，计算机配件、办公耗材、办公用品零售；软件开发；信息技术咨询服务；互联网信息服务；其他互联网服务；
            </p>
          </div>
          <GongSiJieShao :footer="false">
            <template slot="mainInfo">
              成熟可靠的网站建设伙伴
            </template>
          </GongSiJieShao>
          <div class="profile-tabs">
            <!-- :tab-icon="['camera', 'palette', 'favorite']" -->
            <tabs
              :tab-name="['公司介绍', '公司资质']"
              :tab-icon="['x', 'x']"
              plain
              color-button=""
            >
              <!-- here you can add your content for tab-content -->
              <template slot="tab-pane-1">
                <div class="md-layout">
                  <p style="font-size: 18px;">
                    石家庄鑫灵信息技术有限责任公司成立于2017年04月06日，注册地位于河北省石家庄市裕华区仓兴街10号盛邦花园六区9-2601，法定代表人为赵华杰。经营范围包括计算机软硬件技术开发、咨询及服务，计算机及软件、电子产品及辅助设备的销售，计算机配件、办公耗材、办公用品零售；软件开发；信息技术咨询服务；互联网信息服务；其他互联网服务；
                  </p>
                </div>
              </template>
              <template slot="tab-pane-2">
                <div class="md-layout">
                  <div class="md-layout-item md-size-25 ml-auto">
                    <img :src="tabPane2[0].image" class="rounded" />
                    <img :src="tabPane2[1].image" class="rounded" />
                    <img :src="tabPane2[2].image" class="rounded" />
                  </div>
                  <div class="md-layout-item md-size-25 mr-auto">
                    <img :src="tabPane2[3].image" class="rounded" />
                    <img :src="tabPane2[4].image" class="rounded" />
                  </div>
                </div>
              </template>
              <template slot="tab-pane-3">
                <div class="md-layout content">
                  <div>
                    <h3 class="label-h3">地 址：</h3>
                    <span class="text-span"
                      >北京市海淀区中关村环保园地锦路5号院3号楼百卓大厦</span
                    >
                  </div>
                  <div>
                    <h3 class="label-h3">电 话：</h3>
                    <span class="text-span"
                      >010-59738702(总机电话)
                      4006-789-813(销售/服务热线电话)</span
                    >
                  </div>
                </div>
              </template>
            </tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabs } from "@/components";
import HeadLine from "./components/HeadLine.vue";
import GongSiJieShao from "./components/GongSiJieShao";
export default {
  components: {
    Tabs,
    HeadLine,
    GongSiJieShao
  },
  bodyClass: "profile-page",
  data() {
    return {
      tabPane1: [
        { image: require("@/assets/img/examples/studio-1.jpg") },
        { image: require("@/assets/img/examples/studio-2.jpg") },
        { image: require("@/assets/img/examples/studio-4.jpg") },
        { image: require("@/assets/img/examples/studio-5.jpg") }
      ],
      tabPane2: [
        { image: require("@/assets/img/examples/olu-eletu.jpg") },
        { image: require("@/assets/img/examples/clem-onojeghuo.jpg") },
        { image: require("@/assets/img/examples/cynthia-del-rio.jpg") },
        { image: require("@/assets/img/examples/mariya-georgieva.jpg") },
        { image: require("@/assets/img/examples/clem-onojegaw.jpg") }
      ],
      tabPane3: [
        { image: require("@/assets/img/examples/mariya-georgieva.jpg") },
        { image: require("@/assets/img/examples/studio-3.jpg") },
        { image: require("@/assets/img/examples/clem-onojeghuo.jpg") },
        { image: require("@/assets/img/examples/olu-eletu.jpg") },
        { image: require("@/assets/img/examples/studio-1.jpg") }
      ]
    };
  },
  props: {
    header: {
      type: String,
      default: require("@/assets/img/guwm.jpg")
    },
    img: {
      type: String,
      default: require("@/assets/img/faces/christian.jpg")
    }
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.header})`
        // background: "#1661a2"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  text-align: center;
  width: 100%;
}
.label-h3 {
  display: inline-block;
  font-weight: 500;
}
.text-span {
  font-size: 1.5rem;
}
.section {
  padding: 0;
}

.profile-tabs::v-deep {
  .md-card-tabs .md-list {
    justify-content: center;
  }

  [class*="tab-pane-"] {
    margin-top: 3.213rem;
    padding-bottom: 50px;

    img {
      margin-bottom: 2.142rem;
    }
  }
}
</style>
